<template>
  <div class="communityright">
    <div class="actor-things">
      <h3
        style="
          border-bottom: 1px solid #999;
          margin: 10px;
          margin-top: 10px;
          margin-bottom: 10px;
        "
      >
        笔记作者
      </h3>
      <span>
        <div
          class="left"
          style="
            border-bottom: 1px solid #999;
            margin: 10px;
            margin-bottom: 50px;
          "
        >
          <img :src="imgURL" alt="" class="imgs" style="margin-bottom: 10px" />
          <span style="font-size: 15px">{{ datas.user_name }}</span>
        </div>
      </span>
    </div>
    <div class="other-h3">
      <h3 class="other-font">相关笔记</h3>
    </div>
    <div class="other-actor">
      <ul>
        <li class="other-actor-li" v-for="item in themes" :key="item.theme_id">
          <img :src="item.pic_url" alt="" />
          <span>
            <span>
              <p class="title" @click="showdetails(item)">
                {{ item.theme_title }}
              </p>
            </span>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "CommunityRight",
  data() {
    return {
      datas: [],
      themeId: "",
      imgURL: "",
      themes: [],
    };
  },
  methods: {
    showdetails(item) {
      this.$router.push({
        path: "/communitymenu",
        query: { id: item.theme_id },
      });
      this.$router.go(0)
    },
  },
  mounted() {
    this.themeId = this.$route.query.id;
    this.$axios
      .post("/api/users/getUserInfoBytheme", { theme_id: this.themeId })
      .then((res) => {
        this.datas = res.data.results[0];
        if (this.datas.user_pic == null || this.datas.user_pic == "") {
          this.imgURL = require("../assets/small_log.jpg");
        } else {
          this.imgURL = "http://localhost:3000/images/" + this.datas.user_pic;
        }
      });
    this.$axios.get("api/users/getCommunity").then((res) => {
      this.themes = res.data.results;
    });
  },
};
</script>

<style>
.other-actor ul {
  list-style: none;
  margin-top: 10px;
}
.other-h3 {
  width: 300px;
  border: 1px solid #999;
  border-radius: 3%;
  margin-top: 30px;
}
.other-font {
    line-height: 30px;
    margin-left: 10px;
}
.other-actor-li {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  margin-bottom: 10px;
}
.other-actor-li .title:hover {
  color: red;
}
.other-actor-li img {
  width: 80px;
  height: 80px;
  border: 1px solid #ccc;
  border-radius: 5%;
  margin-right: 5px;
}

.actor-things {
  width: 300px;
  height: 120px;
  border: 1px solid #999;
  border-radius: 3%;
  background-color: #fff;
}
.other-actor {
  width: 300px;
  border: 1px solid #999;
  border-radius: 3%;
  background-color: #fff;
  height: 400px;
  overflow: auto;
}
.imgs {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.title {
  padding-top: 20px;
}
</style>